<template>
    <div class="admin">
        <div class="ls-card">
            <!-- 头部表单 -->
            <div class="m-t-20">
                <el-form
                    :inline="true"
                    :model="form"
                    size="small"
                >
                    <!-- 自提门店 -->
                    <el-form-item :label="$t('门店名称')">
                        <el-input
                            v-model="form.name"
                            :placeholder="$t('请输入门店名称')"
                        />
                    </el-form-item>

                    <!-- 门店状态 -->
                    <el-form-item
                        :label="$t('门店状态')"
                        class="m-l-24"
                    >
                        <el-select
                            v-model="form.status"
                            :placeholder="$t('请选择状态')"
                        >
                            <el-option
                                :label="$t('全部')"
                                value=""
                            ></el-option>
                            <el-option
                                :label="$t('启用')"
                                :value="1"
                            ></el-option>
                            <el-option
                                :label="$t('停用')"
                                :value="0"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <!-- 搜索查询 -->
                    <el-form-item class="m-l-24">
                        <el-button
                            type="primary"
                            @click="search"
                        >{{$t('查询')}}</el-button>
                        <el-button @click="resetSearch">{{$t('重置')}}</el-button>
                        <export-data class="m-l-10" :method="apiSelffetchShopList" :param="form" :pageSize="pager._size"></export-data>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="ls-card m-t-16">
            <!-- 添加自提门店 -->
            <el-button
                type="primary"
                size="small"
                @click="addSelffetchShop"
            >{{$t('新增自提门店')}}</el-button>

            <!-- 管理员数据列表 -->
            <div class="m-t-24">
                <el-table
                    :data="pager.lists"
                    v-loading="pager.loading"
                    style="width: 100%"
                    size="mini"
                >
                    <el-table-column
                        prop="name"
                        :label="` ${$t('门店')}} LOGO`"
                        min-width="80"
                    >
                        <div class="flex" slot-scope="scope">
                            <el-image :src="scope.row.image" style="width: 40px; height: 40px;" fit="fill" />
                            <!-- <span class="m-l-10">{{ scope.row.name }}</span> -->
                        </div>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        :label="$t('门店名称')"
                        min-width="120"
                    />
                    <el-table-column
                        prop="contact"
                        :label="$t('店长')"
                        min-width="100"
                    />
                    <el-table-column
                        prop="mobile"
                        :label="$t('联系电话')"
                        min-width="120"
                    />
                    <el-table-column
                        prop="detailed_address"
                        :label="$t('门店地址')"
                        min-width="220"
                    />
                    <el-table-column
                        prop="create_time"
                        :label="$t('营业时间')"
                        width="180"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.business_start_time + '-' +  scope.row.business_end_time}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        :label="$t('门店状态')"
                        min-width="80"
                    >
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.status"
                                :active-value="1"
                                :inactive-value="0"
                                :active-color="styleConfig.primary"
                                inactive-color="#f4f4f5"
                                @change="changeSwitchStatus($event, scope.row)"
                            />
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        sortable
                        prop="create_time"
                        :label="$t('创建时间')"
                        width="180"
                    /> -->
                    <el-table-column
                        :label="$t('操作')"
                        min-width="200"
                    >
                        <!-- 操作 -->
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="small"
                                @click="goSelffetchShopEdit(scope.row)"
                            >{{$t('编辑')}}</el-button>
                            <ls-dialog
                                class="m-l-10 inline"
                                @confirm="onSelffetchShopDelete(scope.row)"
                            >
                                <el-button
                                    type="text"
                                    size="small"
                                    slot="trigger"
                                >{{$t('删除')}}</el-button>
                            </ls-dialog>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="m-t-24 pagination">
                    <ls-pagination
                        v-model="pager"
                        @change="getSelffetchShopList"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">

 import  i18n from '@/plugins/i18n' 
import { Component, Vue } from 'vue-property-decorator'
import {
    apiSelffetchShopList,
    apiSelffetchShopStatus,
    apiSelffetchShopDel,
} from '@/api/marketing/selffetch'
import { PageMode } from '@/utils/type'
import { RequestPaging } from '@/utils/util'
import LsDialog from '@/components/ls-dialog.vue'
import LsPagination from '@/components/ls-pagination.vue'
import ExportData from '@/components/export-data/index.vue'


@Component({
    components: {
        LsDialog,
        LsPagination,
        ExportData,
    },
})
export default class SelffetchShop extends Vue {
    /** S Data **/
    apiSelffetchShopList = apiSelffetchShopList
    // 表单数据
    form = {
        name: '', //名称
        status: '', //角色id
    }
    pager: RequestPaging = new RequestPaging()
    /** E Data **/

    /** S Methods **/
    // 搜索
    search() {
        this.pager.page = 1
        this.getSelffetchShopList()
    }

    // 重置搜索
    resetSearch() {
        Object.keys(this.form).map((key) => {
            this.$set(this.form, key, '')
        })
        this.getSelffetchShopList()
    }

    // 获取列表数据
    getSelffetchShopList() {
        // 请求管理员列表
        this.pager
            .request({
                callback: apiSelffetchShopList,
                params: this.form,
            })
            .catch(() => {
                this.$message.error(i18n.t('数据请求失败，刷新重载!'))
            })
    }

    // 添加
    addSelffetchShop() {
        this.$router.push({
            path: '/selffetch/selffetch_shop_edit',
            query: {
                mode: PageMode['ADD'],
            },
        })
    }

    // 删除
    onSelffetchShopDelete(data: any) {
        apiSelffetchShopDel({ id: data.id })
            .then(() => {
                // 删除成功就请求新列表
                this.getSelffetchShopList()
            })
    }

    // 编辑
    goSelffetchShopEdit(data: any) {
        this.$router.push({
            path: '/selffetch/selffetch_shop_edit',
            query: {
                mode: PageMode['EDIT'],
                id: data.id,
            },
        })
    }

    // 更改状态
    changeSwitchStatus(value: 0 | 1, data: any) {
        apiSelffetchShopStatus({
            id: data.id,
            status: value,
        }).catch(err => {
            this.getSelffetchShopList()
        })
    }

    /** E Methods **/

    /** S Life Cycle **/
    created() {
        this.getSelffetchShopList()
    }

    /** E Life Cycle **/
}
</script>s

<style lang="scss" scoped>
.pagination {
    padding-right: 5%;
    display: flex;
    justify-content: flex-end;
}
</style>